<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <!-- 头部 -->
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">创建星球</view>
    </view>
    <!-- 主体 -->
    <u--form
      labelPosition="left"
      labelWidth="200rpx"
      :model="model1"
      ref="uForm"
      class="form_box"
    >
      <u-form-item
        label="星球标题"
        prop="userInfo.title"
        ref="item2"
        borderBottom
      >
        <view>
          <u--input
            v-model="model1.userInfo.title"
            border="none"
            :customStyle="{
              'border-radio': '16rpx',
              'margin-top': '16rpx',
              'margin-left': '302rpx',
            }"
            placeholder="填写星球名称..."
          ></u--input>
        </view>
      </u-form-item>
      <u-form-item
        label="创建组别"
        prop="userInfo.title"
        ref="item2"
        borderBottom
      >
        <view>
          <u--input
            v-model="model1.userInfo.group"
            border="none"
            :customStyle="{
              'border-radio': '16rpx',
              'margin-top': '16rpx',
              'margin-left': '352rpx',
            }"
            placeholder="创建组别..."
          ></u--input>
        </view>
      </u-form-item>
      <u-form-item
        labelPosition="top"
        label="星球简介"
        prop="content"
        ref="item2"
        borderBottom
      >
        <u--textarea
          border="none"
          style="margin-top: 16rpx"
          height="140"
          v-model="model1.userInfo.content"
          placeholder="说说看法..."
        ></u--textarea>
      </u-form-item>
      <u-form-item
        labelPosition="top"
        label="发言规则"
        prop="content"
        ref="item2"
        borderBottom
      >
        <u--textarea
          border="none"
          style="margin-top: 16rpx"
          height="140"
          v-model="model1.userInfo.rule"
          placeholder="说说看法..."
        ></u--textarea>
      </u-form-item>

      <view class="introduce">
        <view class="introduce_title">{{ title }}</view>
        <view class="introduce_text">
          {{ text }}
        </view>
      </view>

      <view class="btn">
        <view class="box_btn"> 发布 </view>
      </view>
    </u--form>
	<floatingBall></floatingBall>
  </view>
</template>

<script>
import collect from "@/components/collect.vue"; // 收藏、
import progressBar from "@/pages/components/progress_bar.vue"; //录音
export default {
  components: {
    collect,
    progressBar,
  },

  data() {
    return {
      title: "",
      statusBarHeight: 0,
      height: 0,
      model1: {
        userInfo: {
          group: "", // 组别
          title: "", // 标题
          content: "", // 简介
          rule: "", // 规则
        },
      },
    };
  },
  onLoad(options) {
    this.title = options.title;
    this.text = options.text;
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  // background: #F7F8FA;
  box-sizing: border-box;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #ffffff;
  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
    font-size: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
.form_box {
  padding: 0 30rpx;
  box-sizing: border-box;
  .u-textarea {
    padding: 0;
  }
  .btn {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;

    .box_btn {
      width: 100%;
      height: 96rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(360deg, #50b674 0%, #aeddbd 100%);
      border-radius: 48rpx;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .introduce {
    background: #f7f8fa;
    padding: 32rpx;
    border-radius: 16rpx;
    margin-top: 56rpx;
    .introduce_title {
      font-size: 32rpx;
      color: #444444;
    }
    .introduce_text {
      font-size: 26rpx;
      color: #888888;
      margin-top: 16rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3; /* 控制显示的行数 */
    }
  }
}
</style>